<template>
	<view class="maket-box">
		<view class="img-box">
			<img src="https://file.casugn.com/storecompcard//tmp_d1c5e7658a77e32e414402b168215e8a548af27f98d5fdfd_1666331221036.jpg"
				alt="">
		</view>
		<view class="search-box">
			<u-search placeholder="请输入内容" v-model="searchVal" :clearabled="true" :showAction="true"
				borderColor="#e1e1e1" searchIconSize="26" bgColor="white" height="65" actionText="搜索"
				@search="searchChange" @custom="searchChange" @clear="searchClear"></u-search>
		</view>
		<view class="mark-item-box">
			<view class="mark-list" v-for="(item,index) in marketList" :key="index" @click="toMarketInfo(item,index)">
				<view class="mark-collection" @click.stop="collectMethod(item,index)" v-if="tabVal==0">
					<img v-show="!item.collec"
						src="https://file.casugn.com/storecompcard//6O228HBtk3wRe440b1cca46aba4f3db8280d67901c74_1662341362856.png"
						alt="">
					<img v-show="item.collec"
						src="https://file.casugn.com/storecompcard//mBjjyxq1i74Aa78abb376722c7b4ffa682224920060e_1663137688378.png"
						alt="">
				</view>
				<view class="mark-img-box">
					<img :src="item.fileList[0]" alt="">
				</view>

				<view class="mark-name">
					{{item.name}}
				</view>
				<view class="mark-num" v-if="tabVal==1">
					<text class="sup-info-cont1">￥</text>
					<text class="sup-info-cont2">{{item.price}}</text>
					<text class="sup-info-cont3">{{item.city}}</text>
				</view>
				<view class="mark-num" v-if="tabVal==1">
					产品规格：{{item.specs}}
				</view>
				<view class="mark-num" v-if="tabVal==0">
					需求数量：<text>{{item.buyNum}}</text>
				</view>
				<view class="mark-area" v-if="tabVal==0">
					所在地区：<text>{{item.city}}</text>
				</view>
				<view class="mark-cont" v-if="tabVal==0">

					<!-- <view class="mark-pro-cont-tel">
						381人已联系
					</view> -->
					<view class="mark-cont-date">
						{{item.endTime==null?'长期采购':'截止日期:'+item.endTime.substring(0, 10)}}
					</view>
					<view class="mark-title-box">

						<view class="mark-title-lt">
							正在采购
						</view>
						<view class="mark-title-rt">
							{{item.endTime?item.endTime.substring(0, 10):''}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar :value="tabVal" @change="tabChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item text="找采购" icon="home">
				<u-icon slot="active-icon" name="order" size="40"></u-icon>
				<u-icon slot="inactive-icon" name="order" size="40" color="#015eea"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="找供应" icon="photo">
				<u-icon slot="active-icon" name="calendar" size="40"></u-icon>
				<u-icon slot="inactive-icon" name="calendar-fill" size="40" color="#015eea"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="toMyMarket">
				<u-icon slot="active-icon" name="account" size="40"></u-icon>
				<u-icon slot="inactive-icon" name="account-fill" size="40" color="#015eea"></u-icon>
			</u-tabbar-item>
		</u-tabbar>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchVal: '', //搜索内容
				tabVal: 0, //底部tab value
				marketList: [], //
				openId: '', //
				pageNo: 1,
				pageSize: 10,
			}
		},
		onLoad() {
			//fix 从上一级页面返回时 tabVal 没有重置问题
			uni.$on('resetTabVal', (e) => {
				this.tabVal = e
				if (this.tabVal == 0) {
					this.pageNo = 1
					this.marketList = []
					this.getMaketBuyLists('reset')
					return
				}
				if (this.tabVal == 1) {
					console.log(this.tabVal, '监听resetTabVal');
					this.pageNo = 1
					this.getSupplyLists('reset')
					return
				}
			})
		},
		onShow() {
			console.log('onshow');
			let openId = uni.getStorageSync('openId')
			// console.log("openId", openId)
			this.openId = openId.openid
			this.marketList = []
			this.pageNo = 1
			if (this.tabVal == 0) {
				this.getMaketBuyLists('reset')
			} else {
				this.getSupplyLists('reset')
			}


		},
		//加载更多
		onReachBottom() {
			if (this.tabVal == 0) {
				if (this.pageNo * this.pageSize >= this.total) {
					return uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				} else {
					this.pageNo++
					this.getMaketBuyLists()
				}
			} else if (this.tabVal == 1) {
				if (this.pageNo * this.pageSize >= this.total) {
					return uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				} else {
					this.pageNo++
					this.getSupplyLists()
				}
			}


		},
		methods: {
			// 搜索
			searchChange() {
				if (this.tabVal == 0) {
					this.marketList = []
					this.getMaketBuyLists()
				} else if (this.tabVal == 1) {
					this.getSupplyLists('reset')
				}
			},
			// 清空
			searchClear() {
				this.searchVal = ''
				if (this.tabVal == 0) {
					this.marketList = []
					this.getMaketBuyLists()
				} else if (this.tabVal == 1) {
					this.getSupplyLists('reset')
				}
			},
			// tab切换
			tabChange(val) {
				console.log(val)
				this.tabVal = val
				if (this.tabVal == 0) {
					this.pageNo = 1
					this.marketList = []
					this.getMaketBuyLists()
				} else if (this.tabVal == 1) {
					this.getSupplyLists('reset')
				} else {
					this.pageNo = 1
					this.marketList = []
					this.toMyMarket()
				}
			},
			// 找采购收藏
			collectMethod(item, index) {
				if (item.collec == false) {
					// 收藏
					let data = {
						openId: this.openId,
						recordId: item.id,
						type: 2
					}
					this.$api.collectionToBuy(data).then(res => {
						console.log(res)
						if (res.success) {
							this.marketList = []
							this.getMaketBuyLists()
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				} else {
					// 取消收藏
					let data = {
						openId: this.openId,
						recordId: item.id,
						type: 2
					}
					this.$api.collectionToBuy(data).then(res => {
						console.log(res)
						if (res.success) {
							this.marketList = []
							this.getMaketBuyLists()
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}


			},

			// 找采购列表数据
			getMaketBuyLists(reset) {
				this.$api.queryMarketBuyLists(this.searchVal, this.openId, this.pageNo, this.pageSize).then(res => {
					if (res.success && res.result.records) {
						console.log(res.result, '找采购列表数据')
						res.result.records.forEach(item => {
							item.fileList = item.fileList.split(',')
						})
						if (reset == 'reset') {
							this.marketList = []
							this.marketList = [...this.marketList, ...res.result.records]
							this.total = res.result.total
						} else {
							this.marketList = [...this.marketList, ...res.result.records]
							this.total = res.result.total
						}

					} else {
						this.marketList = []
						this.total = 0
					}
				})
			},
			// 找供应
			getSupplyLists(reset) {
				let data = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					name: this.searchVal
				}
				this.$api.queryMySupplyLists(data).then(res => {

					if (res.success && res.result.records) {
						console.log(res.result, '找供应')
						res.result.records.forEach(item => {
							item.fileList = item.imageList.split(',')
						})
						if (reset == 'reset') {
							this.marketList = []
							this.marketList = [...this.marketList, ...res.result.records]
							this.total = res.result.total
						} else {
							this.marketList = [...this.marketList, ...res.result.records]
							this.total = res.result.total
						}
					} else {
						this.marketList = []
						this.total = 0
					}
				})
			},

			// 点击进入详情
			toMarketInfo(item, index) {
				if (this.tabVal == 0) {
					uni.setStorageSync('pageBuyId', item.id)
					uni.navigateTo({
						url: '/pagesBusiness/marketPage/marketBuyInfo'
					})
				} else if (this.tabVal == 1) {
					uni.setStorageSync('pageSupplyId', item.id)
					uni.navigateTo({
						url: '/pagesBusiness/marketSupplyInfo/marketSupplyInfo'
					})
				}
			},

			// 跳转我的
			toMyMarket() {
				uni.setStorageSync('myMarketIndex', '')
				uni.navigateTo({
					url: `/pagesBusiness/myMarket/myMarket`
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.maket-box {
		padding: 0 20upx;
		padding-bottom: 60upx;
		position: relative;

		.img-box {
			height: 300upx;

			img {
				width: 100%;
				height: 300upx;
			}
		}

		.search-box {
			margin-top: 20upx;
		}

		.tab-box {
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
		}

		.mark-item-box {
			display: flex;
			flex-wrap: wrap;

			.mark-list {
				position: relative;
				display: flex;
				flex-direction: column;
				margin-top: 30upx;
				width: 48%;
				padding-bottom: 20upx;
				border-radius: 10upx;
				box-shadow: 0px 0px 5px 1px rgba(154, 154, 154, 0.4);
				background-color: white;

				&:nth-child(2n+1) {
					margin-right: 4%;
				}

				.mark-collection {
					position: absolute;
					right: 10upx;
					top: 280upx;
					width: 60upx;
					height: 60upx;

					img {
						width: 60upx;
						height: 60upx;
					}
				}

				.mark-img-box {
					height: 280upx;
					border-radius: 10upx 10upx 0 0;

					img {
						width: 100%;
						height: 100%;
						border-radius: 10upx 10upx 0 0;
					}
				}

				.mark-name,
				.mark-num,
				.mark-area,
				.mark-cont {
					font-size: 26upx;
					color: #000000;
					padding: 0 10upx;
					margin-top: 10upx;
				}

				.mark-area {
					height: 70upx;
				}

				.mark-cont {
					display: flex;
					justify-content: space-between;
					font-size: 24upx;

					.mark-cont-date {
						padding: 5upx 0upx;
					}

					.mark-title-lt {
						background: #1dbf73;
						color: white;
						padding: 5upx 10upx;
					}
				}
			}


		}
	}
</style>
